<template>
  <basic-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="充值设置" name="first">
        <formRecharge :formRecharge="formRecharge" @callBack="callBack"></formRecharge>
      </el-tab-pane>
      <el-tab-pane label="短信提醒设置" name="second">
        <formMessage :formMessage="formMessage" @callBack="callBack"></formMessage>
      </el-tab-pane>
      <el-tab-pane label="欠费拉闸设置" name="third">
        <formSwitch :formSwitch="formSwitch" @callBack="callBack"></formSwitch>
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>

<script>
import formRecharge from "../components/configuration/formRecharge";
import formMessage from "../components/configuration/formMessage";
import formSwitch from "../components/configuration/formSwitch";
import { getConfig, setConfig } from "@/api/meter/configuration";

export default {
  name: "configuration",
  data() {
    return {
      activeName: "first",
      formRecharge: {
        lower: "50",
        upper: "5000",
        gear: [
          {
            value: "100",
          },
          {
            value: "300",
          },
          {
            value: "500",
          },
          {
            value: "800",
          },
          {
            value: "1000",
          },
          {
            value: "自定义",
          },
        ],
      }, // 充值表单
      formMessage: {
        money: 50,
      }, // 短信提醒
      formSwitch: {
        switch: false,
        time: "00:00",
      }, // 拉闸提醒
    };
  },
  created() {
    getConfig().then((res) => {
      const data = res.data.data.records[0];
      //  设置提醒数据
      let rechargeConfig = data.rechargeConfig?JSON.parse(data.rechargeConfig):{};
      this.formRecharge = {
        lower: rechargeConfig.bottom,
        upper: rechargeConfig.top,
        gear: [
          {
            value: rechargeConfig.predefine_one,
          },
          {
            value: rechargeConfig.predefine_two,
          },
          {
            value: rechargeConfig.predefine_three,
          },
          {
            value: rechargeConfig.predefine_four,
          },
          {
            value: rechargeConfig.predefine_five,
          },
          {
            value: "自定义",
          },
        ],
      };
      let feeRemindConfig = data.feeRemindConfig?JSON.parse(data.feeRemindConfig):{};
      this.formMessage = {
        money: feeRemindConfig.thresholds,
      };
      let powerCutConfig = data.powerCutConfig?JSON.parse(data.powerCutConfig):{};
      this.formSwitch = {
        switch: powerCutConfig.isPowerCut == 1,
        time: powerCutConfig.powerCutTime,
      };
    });
  },
  methods: {
    callBack() {
      const { formRecharge, formMessage, formSwitch } = this;
      // 保存设置数据
      setConfig({
        id: '1300777055863750657',
        rechargeConfig: {
          bottom: formRecharge.lower,
          top: formRecharge.upper,
          predefine_one: formRecharge.gear[0].value,
          predefine_two: formRecharge.gear[1].value,
          predefine_three: formRecharge.gear[2].value,
          predefine_four: formRecharge.gear[3].value,
          predefine_five: formRecharge.gear[4].value,
        }, // 充值json
        feeRemindConfig: {
          thresholds: formMessage.money,
        }, // 短信json
        powerCutConfig: {
          isPowerCut: formSwitch.switch ? 1 : 2,
          powerCutTime: formSwitch.time,
        }, // 拉闸json
      }).then(() => {
        this.$message({
          type: "success",
          message: "设置成功",
        });
      });
    },
  },
  components: {
    formRecharge,
    formMessage,
    formSwitch,
  },
};
</script>

<style lang="scss" scoped>
</style>
